<script setup lang="ts">
import { onMounted, ref } from 'vue';

import { Page } from '@vben/common-ui';

import { message } from 'ant-design-vue';

import { useVbenForm } from '#/adapter/form';
import {
  getAdminUserInfoEmailSetting,
  postAdminUserInfoEmailSettingTest,
  putAdminUserInfoEmailSetting,
} from '#/api/admin/userInfo';

const loading = ref<boolean>(true);
const currentTab = ref(0);
const handleTest = async (values: any) => {
  const { msg } = await postAdminUserInfoEmailSettingTest(values);
  message.success(msg);
};

async function onSubmit(values: Record<string, any>) {
  const { msg } = await putAdminUserInfoEmailSetting(values);
  message.success(msg);
}

function onSecondReset() {
  currentTab.value = 0;
}

const [TestForm, testFormApi] = useVbenForm({
  commonConfig: {
    componentProps: {
      class: 'w-full',
    },
  },
  handleReset: onSecondReset,
  handleSubmit: handleTest,
  layout: 'horizontal',
  resetButtonOptions: {
    content: '修改邮箱配置',
  },
  schema: [
    {
      component: 'Input',
      componentProps: {
        placeholder: '请输入',
      },
      fieldName: 'to',
      label: '收件人邮箱',
      rules: 'required',
    },
    {
      component: 'Input',
      componentProps: {
        placeholder: '请输入',
      },
      fieldName: 'subject',
      label: '标题',
      rules: 'required',
    },
    {
      component: 'Input',
      componentProps: {
        placeholder: '请输入',
      },
      fieldName: 'content',
      label: '内容',
      rules: 'required',
    },
  ],
});

const [FirstForm, formApi] = useVbenForm({
  handleSubmit: onSubmit,
  layout: 'vertical',
  commonConfig: {
    componentProps: {
      class: 'w-full',
    },
  },
  handleReset: (values: Record<string, any>) => {
    formApi.validate().then((res) => {
      if (res.valid) {
        currentTab.value = 1;
        // console.log(values);
        testFormApi.setValues(values);
      }
    });
  },
  resetButtonOptions: {
    content: '测试邮箱',
  },
  schema: [
    {
      component: 'Input',
      componentProps: {
        placeholder: '请输入',
      },
      fieldName: 'from_name',
      label: '发件人',
      rules: 'required',
      formItemClass: 'pb-1',
    },
    {
      component: 'Input',
      componentProps: {
        placeholder: '请输入',
      },
      fieldName: 'from',
      label: '邮箱地址',
      rules: 'required',
      formItemClass: 'pb-1',
    },
    {
      component: 'Input',
      componentProps: {
        placeholder: '请输入',
      },
      fieldName: 'host',
      label: 'SMTP服务器',
      rules: 'required',
      formItemClass: 'pb-1',
    },
    {
      component: 'Select',
      componentProps: {
        options: [
          { label: 'tls', value: 'tls' },
          { label: 'ssl', value: 'ssl' },
          { label: '默认', value: '' },
        ],
        placeholder: '请选择',
      },
      fieldName: 'smtp_secure',
      label: '连接方式',
      rules: 'required',
      formItemClass: 'pb-1',
    },
    {
      component: 'Input',
      componentProps: {
        placeholder: '请输入',
      },
      fieldName: 'port',
      label: 'SMTP服务器端口',
      rules: 'required',
      formItemClass: 'pb-1',
    },
    {
      component: 'Input',
      componentProps: {
        placeholder: '请输入',
      },
      fieldName: 'username',
      label: '发件箱帐号',
      rules: 'required',
      formItemClass: 'pb-1',
    },
    {
      component: 'InputPassword',
      componentProps: {
        placeholder: '请输入',
      },
      fieldName: 'password',
      label: '发件箱授权码',
      rules: 'required',
      formItemClass: 'pb-1',
    },
    {
      component: 'Editor',
      componentProps: {
        placeholder: '请输入',
      },
      fieldName: 'signature',
      label: '邮箱签名',
      rules: 'required',
      formItemClass: 'col-span-2 pb-1',
    },
  ],
  wrapperClass: 'grid grid-cols-2 gap-4',
});

const onGetMailConfig = async () => {
  const { data } = await getAdminUserInfoEmailSetting();
  if (data.setting) {
    formApi.setValues(data.setting);
  }
  formApi.setValues({});
  loading.value = false;
};

onMounted(async () => {
  await onGetMailConfig();
});
</script>

<template>
  <Page>
    <FirstForm v-show="currentTab === 0" />
    <TestForm v-show="currentTab === 1" />
  </Page>
</template>
